import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _isFunction from "lodash/isFunction";
import _forEach from "lodash/forEach";

var _dec, _class;

/**
 * ComponentProp.js
 * @date 2018-10-03
 */
import React from 'react';
import { Form, Input, InputNumber, Divider, Button, Checkbox, Select } from 'antd';
import intl from 'utils/intl';
import ValueList from 'components/ValueList';
import HiddenColumnsEditModal from "./HiddenColumnsEditModal";
import { attributeNameProp, attributeValueProp } from "../../config";
import { getQueryFormOptions, templatesIsNoEqual } from "../../utils";
var inputComponentStyle = {
  width: '100%'
};
var ComponentProp = (_dec = Form.create({
  fieldNameProp: null,
  onValuesChange: function onValuesChange(props, changedValues, allValues) {
    if (_isFunction(props.onValuesChange)) {
      props.onValuesChange(props, changedValues, allValues);
    }
  }
}), _dec(_class = /*#__PURE__*/function (_React$Component) {
  _inherits(ComponentProp, _React$Component);

  var _super = _createSuper(ComponentProp);

  function ComponentProp(props) {
    var _this;

    _classCallCheck(this, ComponentProp);

    _this = _super.call(this, props);
    _this.state = {
      hiddenColumnModalProps: {}
    };
    _this.handleUpdateHiddenColumn = _this.handleUpdateHiddenColumn.bind(_assertThisInitialized(_this));
    _this.handleCloseHiddenColumnModal = _this.handleCloseHiddenColumnModal.bind(_assertThisInitialized(_this));
    _this.handleOpenHiddenColumnModal = _this.handleOpenHiddenColumnModal.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ComponentProp, [{
    key: "render",
    value: function render() {
      var component = this.props.component;
      var _this$state$hiddenCol = this.state.hiddenColumnModalProps,
          hiddenColumnModalProps = _this$state$hiddenCol === void 0 ? {} : _this$state$hiddenCol;
      var propValues = {};

      _forEach(component.config, function (prop) {
        propValues[prop[attributeNameProp]] = prop[attributeValueProp];
      });

      return /*#__PURE__*/React.createElement(Form, null, this.renderComponentCommonProps(propValues), /*#__PURE__*/React.createElement(Divider, null), this.renderComponentDynamicTableProps(propValues), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
        style: {
          width: '100%'
        },
        type: "primary",
        onClick: this.handleOpenHiddenColumnModal
      }, "\u5B9A\u4E49\u9690\u85CF\u57DF")), hiddenColumnModalProps.visible && /*#__PURE__*/React.createElement(HiddenColumnsEditModal, Object.assign({}, hiddenColumnModalProps, {
        key: component.templateCode,
        onOk: this.handleUpdateHiddenColumn,
        onCancel: this.handleCloseHiddenColumnModal
      })));
    }
  }, {
    key: "renderComponentCommonProps",
    value: function renderComponentCommonProps() {
      var _this$props = this.props,
          form = _this$props.form,
          component = _this$props.component;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
        label: "\u7F16\u7801"
      }, form.getFieldDecorator('templateCode', {
        initialValue: component.templateCode
      })( /*#__PURE__*/React.createElement(Input, {
        disabled: true
      }))), /*#__PURE__*/React.createElement(Form.Item, {
        label: "\u540D\u79F0"
      }, form.getFieldDecorator('description', {
        initialValue: component.description,
        rules: [{
          required: true,
          message: intl.get('cpaas.common.validation.notNull', {
            name: '名称'
          })
        }]
      })( /*#__PURE__*/React.createElement(Input, null))));
    }
  }, {
    key: "renderComponentDynamicTableProps",
    value: function renderComponentDynamicTableProps(propValues) {
      var form = this.props.form;
      var queryFormOptions = this.state.queryFormOptions;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
        key: "pagination",
        className: "ant-form-item-checkbox-cascade-parent"
      }, form.getFieldDecorator('pagination', {
        initialValue: propValues.pagination
      })( /*#__PURE__*/React.createElement(Checkbox, {
        checkedValue: true,
        unCheckedValue: false
      }, "\u5206\u9875"))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "defaultPageSize",
        label: "\u5206\u9875\u5927\u5C0F",
        className: "ant-form-item-checkbox-cascade-child"
      }, form.getFieldDecorator('defaultPageSize', {
        initialValue: propValues.defaultPageSize
      })( /*#__PURE__*/React.createElement(ValueList, {
        options: [{
          value: 10,
          meaning: '10'
        }, {
          value: 20,
          meaning: '20'
        }, {
          value: 50,
          meaning: '50'
        }, {
          value: 100,
          meaning: '100'
        }]
      }))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "rowKey",
        label: "\u6570\u636E\u4E3B\u952E"
      }, form.getFieldDecorator('rowKey', {
        initialValue: propValues.rowKey,
        rules: [{
          required: true,
          message: intl.get('cpaas.common.validation.notNull', {
            name: '数据主键'
          }).d()
        }]
      })(React.createElement(Input))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "queryForm",
        label: "\u67E5\u8BE2\u8868\u5355"
      }, form.getFieldDecorator('queryForm', {
        initialValue: propValues.queryForm
      })( /*#__PURE__*/React.createElement(Select, null, queryFormOptions))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "queryUrl",
        label: "\u52A0\u8F7D\u6570\u636EURL"
      }, form.getFieldDecorator('queryUrl', {
        initialValue: propValues.queryUrl
      })( /*#__PURE__*/React.createElement(Input, null))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "removeUrl",
        label: "\u5220\u9664\u6570\u636EURL"
      }, form.getFieldDecorator('removeUrl', {
        initialValue: propValues.removeUrl
      })(React.createElement(Input))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "batchRemoveUrl",
        label: "\u6279\u91CF\u5220\u9664\u6570\u636EURL"
      }, form.getFieldDecorator('batchRemoveUrl', {
        initialValue: propValues.batchRemoveUrl
      })( /*#__PURE__*/React.createElement(Input, null))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "styleWidth",
        label: "\u5BBD\u5EA6"
      }, form.getFieldDecorator('style.width', {
        initialValue: propValues['style.width']
      })( /*#__PURE__*/React.createElement(InputNumber, {
        style: inputComponentStyle
      }))));
    }
    /**
     * open hiddenColumn editModal
     */

  }, {
    key: "handleOpenHiddenColumnModal",
    value: function handleOpenHiddenColumnModal() {
      var component = this.props.component;
      this.setState({
        hiddenColumnModalProps: {
          visible: true,
          hiddenColumns: component.hiddenColumns
        }
      });
    }
  }, {
    key: "handleCloseHiddenColumnModal",
    value: function handleCloseHiddenColumnModal() {
      this.setState({
        hiddenColumnModalProps: {
          visible: false
        }
      });
    }
  }, {
    key: "handleUpdateHiddenColumn",
    value: function handleUpdateHiddenColumn(hiddenColumns) {
      var component = this.props.component;
      component.hiddenColumns = hiddenColumns;
      this.setState({
        hiddenColumnModalProps: {
          visible: false
        }
      });
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(nextProps, prevState) {
      var templates = nextProps.templates;
      var prevTemplates = prevState.templates;

      if (templatesIsNoEqual(prevTemplates, templates)) {
        return {
          queryFormOptions: getQueryFormOptions(templates),
          templates: templates
        };
      }

      return null;
    }
  }]);

  return ComponentProp;
}(React.Component)) || _class);

if (process.env.NODE_ENV === 'production') {
  ComponentProp.displayName = 'DynamicTable(ComponentProp)';
}

export default ComponentProp;